<script setup>
  import {
    defineProps,
    onMounted,
    ref
  } from 'vue'
  import {
    http
  } from '@/utils/http.js'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'

  const goodsList = ref([])

  // 校验表单数据
  const valiFormData = ref({
    idArr: [],
    min_price: '',
    is_buy: 1,
    buy_price: '',
  })
  // 校验规则
  const rules = ref({
    // min_price: {
    // 	rules: [
    // 		{
    // 			required: true,
    // 			errorMessage: '最低价不能为空',
    // 		},
    // 		{
    // 			format: 'number',
    // 			errorMessage: '最低价只能输入数字',
    // 		},
    // 	],
    // },
    // is_buy: {
    // 	rules: [
    // 		// {
    // 		// 	required: true,
    // 		// 	errorMessage: '请选择是否一口价',
    // 		// },
    // 	],
    // },
    // buy_price: {
    // 	rules: [
    // 		// {
    // 		// 	format: 'number',
    // 		// 	errorMessage: '一口价只能输入数字',
    // 		// },
    // 	],
    // },
  })
  const range = ref([{
      value: 0,
      text: '否'
    },
    {
      value: 1,
      text: '是'
    },
  ])
  const valiForm = ref()

  function submit() {
    valiForm.value
      .validate()
      .then((res) => {
        // if (
        // 	valiFormData.value.is_buy == 1 &&
        // 	valiFormData.value.buy_price == ''
        // ) {
        // 	uni.utils.toast('请输入一口价')
        // 	return
        // } else if (
        // 	Number(valiFormData.value.min_price) <= 0 ||
        // 	(Number(valiFormData.value.buy_price) <= 0 &&
        // 		valiFormData.value.is_buy == 1)
        // ) {
        // 	uni.utils.toast('请输入正确价格')
        // 	return
        // } else if (
        // 	Math.floor(valiFormData.value.min_price) !=
        // 		valiFormData.value.min_price ||
        // 	(Math.floor(valiFormData.value.buy_price) !=
        // 		valiFormData.value.buy_price &&
        // 		valiFormData.value.is_buy == 1)
        // ) {
        // 	uni.utils.toast('价格不可为小数')
        // 	return
        // } else if (
        // 	Number(valiFormData.value.buy_price) <=
        // 		Number(valiFormData.value.min_price) &&
        // 	valiFormData.value.is_buy == 1
        // ) {
        // 	uni.utils.toast('一口价必须大于最低价')
        // 	return
        // }
        if (valiFormData.value.buy_price.split('.')[1] && valiFormData.value.buy_price.split('.')[1].length > 2) {
          uni.utils.toast('最多输入两位小数')
          return
        }
        sendDeal()
      })
      .catch((err) => {
        console.log('err', err)
      })
  }

  function change() {
    if (valiFormData.value.is_buy == 0) {
      valiFormData.value.buy_price = ''
    }
  }

  async function sendDeal() {
    const res = await http.request({
      url: '/api//bidding/biddingPost',
      method: 'POST',
      data: valiFormData.value,
    })
    console.log(res)
    if (res.st == 1) {
      uni.utils.toast('发布成功，即将返回首页')
      setTimeout(() => {
        uni.switchTab({
          url: `/pages/home/index`,
        })
      }, 2000)
    } else {
      uni.utils.toast(res.msg)
    }
  }

  // 交易须知
  const needknowpopup = ref()
  async function needKnow() {
    await getRules()
    needknowpopup.value.open('bottom')
  }
  const ruleStrings = ref('')
  async function getRules() {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: 6,
      },
    })
    console.log(res)
    ruleStrings.value = res.data.details
  }

  function closeNeedKnow() {
    needknowpopup.value.close('bottom')
  }

  //商品详情弹出
  const goodspopup = ref()
  const goodsInfo = ref({
    goods_name: '',
    img: '',
  })

  function checkgoods(item) {
    console.log(item)
    goodsInfo.value = item
    goodspopup.value.open('bottom')
  }

  const sum_money = ref(0)
  onLoad((option) => {
    console.log(JSON.parse(decodeURIComponent(option.list)))
    goodsList.value = JSON.parse(decodeURIComponent(option.list))
    goodsList.value.forEach((item) => {
      valiFormData.value.idArr.push(item.id)
      sum_money.value = (
        Number(sum_money.value) + Number(item.y_price)
      ).toFixed(2)
    })
    valiFormData.value.buy_price = sum_money.value
    valiFormData.value.min_price = sum_money.value
  })
</script>

<template>
  <view class="senddeal-content">
    <view class="senddeal-info">
      <view class="senddeal-info-top">
        <view class="title"> 交易内容 </view>
        <view class="button" @click="needKnow"> 交易须知 </view>
      </view>
      <scroll-view class="scroll-view_H" scroll-x="true" style="height: 160rpx">
        <view class="scroll-list">
          <image v-for="item in goodsList" :key="item.id" :src="item.img" @click="checkgoods(item)" style="
							width: 160rpx;
							height: 160rpx;
							border-radius: 10rpx;
							margin-right: 22rpx;
							flex-shrink: 0;
						" mode=""></image>
        </view>
      </scroll-view>
    </view>
    <view class="senddeal-setting">
      <view class="senddeal-setting-title"> 交易设置 </view>
      <uni-forms ref="valiForm" :rules="rules" :border="false" :modelValue="valiFormData">
        <!-- <uni-forms-item label="最低价" required name="min_price">
					<uni-easyinput
						v-model="valiFormData.min_price"
						type="digit"
						placeholder="请输入最低价"
					/>
				</uni-forms-item>
				<uni-forms-item label="一口价" name="is_buy">
					<uni-data-select
						v-model="valiFormData.is_buy"
						:localdata="range"
						placeholder="请选择是否一口价"
						@change="change"
						:clear="false"
					></uni-data-select>
				</uni-forms-item> -->
        <uni-forms-item label="一口价" name="one">
          <uni-easyinput :disabled="valiFormData.is_buy == 0" v-model="valiFormData.buy_price" type="digit"
            placeholder="请输入一口价" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- <view
			class=""
			style="
				padding: 20rpx;
				background-color: #fff;
				font-size: 24rpx;
				color: #3d3d3d;
				text-align: center;
			"
		>
			成交价不可高于商品参考价总值的120%
		</view> -->
    <view class="senddeal-bottom">
      <view class="senddeal-button" @click="submit"> 确认发布 </view>
    </view>

    <!-- 交易须知 -->
    <uni-popup ref="needknowpopup" type="bottom">
      <view class="needknowpopup-content">
        <view class="" style="
						position: relative;
						align-items: center;
						width: 100%;
						font-size: 44rpx;
						text-align: center;
						line-height: 128rpx;
					">
          <view class=""> 交易须知 </view>
          <view class="" style="position: absolute; right: 14rpx; top: 0" @click="closeNeedKnow">
            X
          </view>
        </view>
        <view class="" style="
						height: 70vh;
						border-radius: 26rpx;
						overflow: hidden;
						background-color: #fff;
					">
          <scroll-view scroll-y="true" style="height: 70vh">
            <view style="
								width: 94%;
								height: 100%;
								margin: 0 auto;
								display: flex;
								align-items: center;
								padding-bottom: env(safe-area-inset-bottom);
							" class="">
              <rich-text :nodes="ruleStrings"></rich-text>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>

    <!-- 详情弹出层 -->
    <uni-popup ref="goodspopup" type="bottom">
      <view class="goodspopup-content">
        <view class="goods-title">{{ goodsInfo.goods_name }} </view>
        <image :src="goodsInfo.img" style="width: 660rpx; height: 660rpx" mode=""></image>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  .senddeal-content {
    height: 100vh;
    padding-top: 22rpx;
    box-sizing: border-box;
    background-color: #f5f5f5;

    .senddeal-info {
      height: 300rpx;
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;

      .senddeal-info-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22rpx;

        .title {
          font-size: 30rpx;
          font-weight: 700;
        }

        .button {
          width: 192rpx;
          height: 58rpx;
          border-radius: 29rpx;
          background-color: $transaction-color;
          font-size: 24rpx;
          font-weight: 700;
          line-height: 58rpx;
          text-align: center;
        }
      }

      .scroll-list {
        display: flex;
        flex-wrap: nowrap;
      }
    }

    .senddeal-setting {
      height: 200rpx;
      padding: 20rpx;
      margin-top: 22rpx;
      box-sizing: border-box;
      background-color: #fff;

      .senddeal-setting-title {
        margin-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: 700;
      }
    }

    .senddeal-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 194rpx;
      background-color: #fff;

      .senddeal-button {
        width: 666rpx;
        height: 86rpx;
        border-radius: 43rpx;
        background-color: $transaction-color;
        line-height: 86rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 700;
      }
    }

    .needknowpopup-content {
      height: 1260rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      border-radius: 40rpx 40rpx 0 0;
      background: linear-gradient(162deg,
          #ffe60f 3%,
          #fbf7e7 10%,
          #fff6a8 67%,
          #f7efa6 104%);
    }
  }

  .goodspopup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 886rpx;
    width: 710rpx;
    margin: 0 auto;
    padding-top: 36rpx;
    box-sizing: border-box;
    border-radius: 10rpx 10rpx 0 0;
    background-color: #fff;

    .goods-title {
      margin-bottom: 17rpx;
      font-size: 30rpx;
    }
  }

  ::v-deep .is-input-border {
    border: none !important;

    &:before {
      content: '￥';
      font-size: 28rpx;
      font-weight: 700;
    }
  }

  ::v-deep .uni-select {
    border: none !important;
  }

  ::v-deep .uni-forms-item__content {
    display: flex;
    align-items: center;
    width: 60% !important;
  }

  ::v-deep .uni-forms-item__label {
    width: 180rpx !important;
    font-weight: 700;
  }

  ::v-deep .uni-error-message {
    left: 96rpx !important;
  }
</style>